<!-- 外圈透明饼状图（智慧运营>>办公服务...） -->
<template>
  <div class="opacity-bar-chart">
    <base-echarts :options="chartOptions" />
  </div>
</template>

<script>
import * as echarts from "echarts";
import BaseEcharts from "./BaseEcharts.vue";
import { TOOLTIP_COMMON } from "@/assets/js/constant";
import { nowSize } from "@/utils/nowSize";
export default {
  name: "OpacityBarChart",
  components: {
    BaseEcharts,
  },
  props: {
    // 图表特有配置数据
    chartExtraData: {
      type: Object,
      default: () => {},
    },
    // 是否渐变
    isGradualChange: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    chartOptions() {
      const {
        title,
        titleLeft,
        titleFontStyle,
        legend,
        innerRadius,
        innerPosition,
        innerColor,
        seriesData,
        outerRadius,
        outerPosition,
        OuterColor,
      } = this.chartExtraData;
      return {
        title: {
          text: title,
          x: titleLeft,
          y: "center",
          textStyle: {
            rich: {
              title: {
                color: "#C0ECF6",
                fontSize: nowSize(20),
                fontStyle: titleFontStyle,
                fontFamily:"PangMenZhengDao",
                align: "center",
                padding: [0, 0, 5, 0],
              },
              subtitle: {
                color: "#C0ECF6",
                fontSize: nowSize(20),
                fontStyle: titleFontStyle,
                fontFamily:"PangMenZhengDao",
                align: "center",
              },
            },
          },
        },
        legend: legend,
        tooltip: {
          trigger: "item",
          ...TOOLTIP_COMMON,
        },
        series: [
          {
            type: "pie",
            radius: innerRadius,
            center: innerPosition,
            minAngle: 2,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: this.isGradualChange ? "#fff" : innerColor[params.dataIndex],
                    },
                    {
                      offset: 1,
                      color: innerColor[params.dataIndex],
                    },
                  ]);
                },
              },
            },
            data: seriesData,
            z: 666,
          },
          {
            type: "pie",
            radius: outerRadius,
            center: outerPosition,
            hoverAnimation: false,
            minAngle: 2,
            emphasis: { scale: false },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: this.isGradualChange ? "rgba(255,255,255,.2)" : OuterColor[params.dataIndex],
                    },
                    {
                      offset: 1,
                      color: OuterColor[params.dataIndex],
                    },
                  ]);
                },
              },
            },
            data: seriesData,
            z: 1,
          },
        ],
      };
    },
  },
};
</script>
<style scoped lang="scss">
.opacity-bar-chart {
  height: 100%;
}
</style>
